<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<style type="text/css">

		.pop_con{
			display:none;
		}
		
		.pop{
			width:400px;
			height:300px;
			background-color:#fff;
			border:1px solid #000;
			position:fixed;
			left:50%;
			top:50%;
			margin-left:-200px;
			margin-top:-150px;
			z-index:9999;
		}

		.mask{
			position:fixed;
			width:100%;
			height:100%;
			background-color:#000;
			left:0;
			top:0;
			opacity:0.3;
			filter:alpha(opacity=30);
			z-index:9990;		
		}


	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			$('#btn').click(function() {
				$('#pop').show();
				return false;
			});

			$('#shutoff').click(function() {
				$('#pop').hide();
			});


			$(document).click(function(event) {
				$('#pop').hide();			
			});

			$('.pop').click(function() {
				return false;
			});

		})


	</script>
</head>
<body>
	<h1>首页标题</h1>
	<p>页面内容</p>
	<input type="button" name="" value="弹出" id="btn">


	<div class="pop_con" id="pop">
		<div class="pop">
			<h3>提示信息！</h3>
			<a href="#" id="shutoff">关闭</a>
			<input type="text" name="">
		</div>
		
		<div class="mask"></div>
	</div>
	
</body>
</html>